<template>
  <view class="Index">
    <view class="logo-title-wrap">
      <!-- 店招设计 -->
      <image class="logo-image" :src="require('@/assets/index/index_bg.jpg')" />
      <view class="company-info-wrap">
        <view class="company-info-title">
          <!-- 店铺logo -->
          <image class="company-info-image" :src="logoImg"></image>
          <!-- 店铺名称 -->
          <view class="company-info-name">
            <text class="company-info-name-text">{{ shopTitle }}</text>
            <view class="company-info-rate">
              <u-rate
                active-color="#fca600"
                inactive-color="#fca600"
                :touchable="false"
                size="14"
                :count="shopCount"
                v-model="shopValue"
              ></u-rate>
              <text class="company-info-rate-text">5.0分</text>
            </view>
          </view>
        </view>
        <!-- 行业描述 -->
        <view class="company-info-des">
          <p>🎀春和碳酸泉头皮护理济南店（需提前1天预约）</p>
          <p>👉济南高新万达华府底商452号</p>
          <p>👉一键解决脱发头屑头油染烫发质受损困扰</p>
          <p>👉预约电话：{{ shopPhone }}</p>
        </view>
        <!-- 分割线 -->
        <view class="company-info-divider"></view>
        <!-- 快捷功能入口 -->
        <view class="company-info-quick-entrance">
          <view class="company-info-icon-wrap" @tap="lookMoreHandler">
            <u-icon
              class="company-info-icon"
              color="#ffffff"
              top="5"
              size="30"
              name="calendar"
            ></u-icon>
            <text class="company-info-icon-text">预约</text>
          </view>
          <view class="company-info-icon-wrap">
            <u-icon
              class="company-info-icon"
              color="#ffffff"
              size="30"
              top="5"
              name="coupon"
            ></u-icon>
            <text class="company-info-icon-text">活动</text>
          </view>
          <view class="company-info-icon-wrap">
            <u-icon
              class="company-info-icon"
              color="#ffffff"
              size="30"
              top="5"
              name="order"
            ></u-icon>
            <text class="company-info-icon-text">订单</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content-wrap">
      <!-- 新品上架 -->
      <view class="new-goods-sales-wrap">
        <!-- 左侧文字部分 -->
        <view class="new-goods-sales-text">
          <!-- 标题 -->
          <view class="new-goods-sales-title">
            <text>新本上架</text>
            <text>new</text>
          </view>
          <text class="new-goods-sales-content-title">酸奶快洗</text>
          <u--text
            :lines="2"
            color="#eaeaea"
            size="12"
            text="酸牛奶对人类的秀发也是有非常好的滋润功效，酸牛奶中带有很多的乳酸菌和碱性物质，平常洗头发时把霉变酸牛奶放到秀发上，轻轻地的搓揉，降低发质损伤的状况，也可以让秀发更为顺滑细嫩"
          ></u--text>
        </view>
        <!-- 右侧图片部分 -->
        <image
          class="new-goods-sales-image"
          :src="require('@/assets/index/goods_img.jpg')"
        ></image>
      </view>
      <!-- 推荐项目 -->
      <view class="recommended-script-wrap">
        <text class="recommended-script-title">推荐项目</text>
        <!-- 剧本内容轮播 -->
        <swiper
          class="recommended-script-swiper"
          :indicator-dots="recommendedSwiper.indicatorDots"
          :autoplay="recommendedSwiper.autoplay"
          :duration="recommendedSwiper.duration"
        >
          <swiper-item
            @click="goodsDetailsHandle(item.id)"
            v-for="(item, index) in recommendData"
            :key="index"
          >
            <image class="recommended-script-swiper-image" :src="item.logo" />
            <view class="recommended-script-swiper-conetent">
              <view class="recommended-script-swiper-title">
                {{ item.title }}
              </view>
              <view class="recommended-script-swiper-price">
                ￥{{ item.market_price }}</view
              >
              <view class="recommended-script-swiper-sales">
                销量：{{
                  item.virtual_sales ? item.virtual_sales : item.sales
                }}</view
              >
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="look-more">
        <u-icon
          labelColor="#898989"
          labelPos="left"
          label="查看更多"
          size="16"
          name="arrow-right"
          @click="lookMoreHandler"
        ></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      shopCount: 5,
      shopValue: 5,
      //推荐剧本轮播
      recommendedSwiper: {
        indicatorDots: false,
        autoplay: false,
        duration: 400,
      },
      recommendData: [],
      logoImg: "",
      shopTitle: "春和碳酸泉头皮护理济南店",
      shopPhone: "",
    };
  },
  onLoad() {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const getWebInfo = await this.$api.getWebInfo({});
      if (getWebInfo) {
        this.logoImg = this.getConfigItem(getWebInfo, "logo_image");
        this.shopTitle = this.getConfigItem(getWebInfo, "site_name");
        this.shopPhone = this.getConfigItem(getWebInfo, "site_phone");
      }
      this.getRecommend();
    },
    goodsDetailsHandle(id) {
      this.$Router.push({
        name: "goodsInfo",
        query: {
          id,
        },
      });
    },
    lookMoreHandler() {
      this.$Router.push({
        name: "goods",
        type: "tab",
      });
    },
    getConfigItem(data, val) {
      let initData;
      if (!Array.isArray(val)) {
        initData = data.filter((item) => {
          return item.name == val;
        });
      }
      return initData[0].value;
    },
    //获取推荐项目
    getRecommend() {
      this.$api.getRecommend({}).then((res) => {
        this.recommendData = res.mall_service.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  .logo-title-wrap {
    /* #ifdef MP-WEIXIN */
    height: 106vh;
    /* #endif */
    /* #ifdef H5 */
    height: 100vh;
    /* #endif */
    .logo-image {
      background-size: 100% 100%;
      width: 100%;
      height: 930rpx;
      position: relative;
    }
  }
  .company-info-wrap {
    background-color: rgba(17, 78, 47, 0.94);
    width: 90%;
    position: absolute;
    bottom: -50rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 10rpx;
    padding-bottom: 100rpx;
    .company-info-title {
      display: flex;
      justify-content: start;
      padding: 40rpx 40rpx;
      .company-info-image {
        width: 136rpx;
        height: 136rpx;
      }
      .company-info-name {
        padding: 0 40rpx;
        .company-info-name-text {
          color: #ffffff;
          font-size: 32rpx;
        }
        .company-info-rate {
          display: flex;
          padding: 20rpx 0;
          align-items: center;
          .company-info-rate-text {
            color: #fca600;
            padding: 0 10rpx;
            font-size: 24rpx;
          }
        }
      }
    }
    .company-info-des {
      font-size: 28rpx;
      padding: 0 40rpx 28rpx 40rpx;
      margin-top: -20rpx;
      color: #eaeaea;
    }
    .company-info-divider {
      border-bottom: 2rpx dotted #114e2f;
      width: 100%;
      margin-bottom: 40rpx;
    }
    .company-info-quick-entrance {
      display: flex;
      justify-content: space-evenly;
      .company-info-icon-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #ffc001;
        border-radius: 50%;
        font-size: 28rpx;
        width: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #ffffff;
        .company-info-icon {
          padding-top: 10rpx;
        }
        .company-info-icon-text {
          padding: 10rpx 0;
        }
      }
    }
  }
  .content-wrap {
    padding-bottom: 40rpx;
    // 新本上架
    .new-goods-sales-wrap {
      display: flex;
      background-color: #114e2f;
      width: 90%;
      margin: 0 auto;
      border-radius: 10rpx;
      padding: 10px 0;
      .new-goods-sales-text {
        padding: 0 40rpx;
        .new-goods-sales-title {
          font-weight: 600;
          text:first-child {
            font-size: 36rpx;
            color: #ffc001;
          }
          text:last-child {
            font-size: 24rpx;
            color: #ffc001;
            border: 1px solid #ffc001;
            border-radius: 8rpx;
            margin-left: 12rpx;
            padding: 0 4rpx;
          }
        }
        .new-goods-sales-content-title {
          font-family: "黑体";
          color: #ffffff;
          font-size: 28rpx;
          font-weight: 600;
        }
      }
      .new-goods-sales-image {
        width: 80%;
        height: 172rpx;
        padding-right: 40rpx;
      }
    }
    //推荐剧本
    .recommended-script-wrap {
      margin-top: 36rpx;
      padding: 0 40rpx;
      .recommended-script-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #353535;
      }
      .recommended-script-swiper {
        border: 1px solid #eee;
        border-radius: 8rpx;
        margin-top: 28rpx;
        height: 590rpx;
        .recommended-script-swiper-image {
          width: 100%;
        }
        .recommended-script-swiper-conetent {
          padding: 0 20rpx;
          .recommended-script-swiper-title {
            font-family: "黑体";
            font-size: 32rpx;
            font-weight: 600;
            color: #353535;
            line-height: 40rpx;
          }
          .recommended-script-swiper-price {
            color: #ffbf01;
            font-size: 28rpx;
            font-weight: 600;
            padding-top: 8rpx;
          }
          .recommended-script-swiper-sales {
            float: right;
            color: #898989;
            font-size: 24rpx;
          }
        }
      }
    }
    .look-more {
      display: flex;
      justify-content: center;
      padding-top: 20rpx;
      color: #898989;
    }
  }
}
</style>
